<template>
  <section>
    <!--<img src="./assets/logo.png">-->
    <aside>
      <h3 class="title" :class="{'transparent':isCollapse}">后台管理系统</h3>
      <el-menu
        default-active="2"
        class="el-menu-vertical-demo"
        :collapse="isCollapse"
        :router="true"
        unique-opened
        @open="handleOpen"
        @close="handleClose">
        <el-submenu v-for="item in list " :index="item.path" v-if="item.show">
          <template slot="title">
            <i :class="item.iconCls"></i>
            <span>{{item.name}}</span>
          </template>
          <el-menu-item style="padding-left: 40px" v-for="i in item.children" :index="i.path"
                        @click="selectColumn(i.name,item.name)" v-if="i.show">
            {{i.name}}
          </el-menu-item>
        </el-submenu>
      </el-menu>
    </aside>
    <section class="main_container" style="overflow: hidden; height: 100vh">
      <header>
        <i class="el-icon-arrow-left toggle" :class="{'ccc':isCollapse}" @click="cc"></i>
        <span>{{userName}}</span>
        <el-button @click="logOut">登出</el-button>
      </header>
      <div
        style="text-align: left;line-height:1.2em;font-size: 16px;padding: 20px; border-bottom: 1px solid rgba(103, 184, 101, 0.6);">
        {{name2}}/{{name3}}
      </div>
      <div class="home_container">
        <router-view/>
      </div>
    </section>
  </section>
</template>

<script>/* eslint-disable indent,space-before-function-paren */
import route from '../router/router'
import {LogOut} from '../api/api'

export default {
  data() {
    return {
      name: 'app',
      isCollapse: false,
      list: [],
      name2: '',
      name3: '',
      userName: 'wwwwwwwwwww'
    }
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath)
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath)
    },
    selectColumn(a, b) {
      [this.name2, this.name3] = [b, a]
    },
    cc() {
      this.isCollapse = !this.isCollapse
      console.log(route)
    },
    Init() {
      this.list = JSON.parse(JSON.stringify(route)).filter(x => x.name === 'Main')[0].children
      console.log(222, this.list)
      this.userName = window.sessionStorage.getItem('name') || '444'
    },
    logOut() {
      LogOut().then(
        data => {
          window.sessionStorage.clear()
          this.$router.push({name: 'logIn'})
        }
      ).catch()
    }
  },
  mounted() {
    this.Init()
  }
}
</script>

<style lang="less">
  .home_container {
    height: calc(~"100vh - 120px");;
    overflow: auto;
    text-align: left;
    padding: 20px;
    box-sizing: border-box;
  }

  .el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 230px;
  }

  .el-menu-vertical-demo.el-menu{
    margin-top: 60px;
  }

  aside {
    background: rgba(103, 184, 101, 0.6);
    text-align: left;
    float: left;
    height: 100vh;
    h3 {
      text-align: center;
      position: absolute;
      width: 230px;
      opacity: 1;
      transition: all 0.5s ease;
    }
    h3.transparent {
      opacity: 0;
      transition: all 0.5s ease;
    }
  }

  header {
    background: #68B966;
    border-left: 1px solid #fff;
    height: 60px;
    .toggle {
      float: left;
      line-height: 60px;
      margin-left: 20px;
      cursor: pointer;
      transform: rotateY(0deg);
    }
    .toggle.ccc {
      transform: rotateY(180deg);
      transition: all 0.5s ease;
    }
    line-height: 60px;
    text-align: right;
    padding-right: 20px;
  }
</style>
